<template>
  <el-dialog title="预览" :visible.sync="$props.dialogVisible" :before-close="handleClose" :modal="false" :close-on-click-modal="false">
    <div v-if="getFileType(fileUrl) == 'docx'">
      <vue-office-docx
        :src="fileUrl"
        style=""
        @rendered="rendered"
        @error="errorHandler"
      />
    </div>
    <div v-if="getFileType(fileUrl) == 'xlsx'">
      <vue-office-excel
        :src="fileUrl"
        style="height: 100vh;overflow: auto"
        @rendered="rendered"
        @error="errorHandler"
      />
    </div>
    <div v-if="getFileType(fileUrl) == 'pdf'">
      <vue-office-pdf
        :src="fileUrl"
        style=""
        @rendered="rendered"
        @error="errorHandler"
        :options="{
            width: '100%',
            overflow: 'auto',
             toolbar: true,

          }"
      />
    </div>
  </el-dialog>
</template>

<script>

// 引入VueOffice组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
// 引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
export default {
  name: 'FilePreviewDialog',
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  props: {
    fileUrl: String, // 文件url
    dialogVisible: { // 控制显示
      type: Boolean,
      default: false
    }
  },
  methods: {

    // 获取文件类型
    getFileType(fileUrl) {
      if (fileUrl !== '' && fileUrl != null && fileUrl !== undefined) {
        const fileType = fileUrl.split('.').pop().toLowerCase() // 文件的扩展名（格式）
        console.log('type:', fileType)
        return fileType
      } else {
        return 'docx'
      }
    },

    // 渲染结果
    rendered() {
      console.log('渲染完成')
    },

    errorHandler() {
      this.$notify.error('加载失败')
    },

    // 关闭
    handleClose(done) {

      this.$emit('closePreviewDialog', false)

      /* this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('closePreviewDialog', false)
        })
        .catch(_ => {})
     */

    }
  }

}
</script>
